---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { ProjectsPageHeader } from '../../components/Projects/ProjectsPageHeader';
import { ProjectsPage } from '../../components/Projects/ProjectsPage';
import { projectApi } from '../../api/project';
import { listOfficialRoadmaps } from '../../queries/official-roadmap';
import { getRoadmapsProjects } from '../../queries/official-project';

export const prerender = false;

const roadmapProjects = await getRoadmapsProjects();
const allRoadmapIds = Object.keys(roadmapProjects);

const roadmaps = await listOfficialRoadmaps();
const allRoadmaps = roadmaps.filter((roadmap) =>
  allRoadmapIds.includes(roadmap.slug),
);

const enrichedRoadmaps = allRoadmaps.map((roadmap) => {
  const projects = (roadmapProjects[roadmap.slug] || []).sort((a, b) => {
    return a.order - b.order;
  });

  return {
    id: roadmap.slug,
    title: roadmap.title.card,
    projects,
  };
});

const projectIds = allRoadmapIds
  .map((id) => roadmapProjects[id])
  .flat()
  .map((project) => project.slug);
const projectApiClient = projectApi(Astro);
const { response: userCounts } =
  await projectApiClient.listProjectsUserCount(projectIds);
---

<BaseLayout
  title='Project Ideas'
  description='Explore project ideas to take you from beginner to advanced in different technologies'
  permalink='/projects'
>
  <ProjectsPageHeader client:load />
  <ProjectsPage
    roadmapsProjects={enrichedRoadmaps}
    userCounts={userCounts || {}}
    client:load
  />
  <div slot='changelog-banner'></div>
</BaseLayout>
